<template>
  <div>
    <tablePaging :tableItem="tableItem" :operationItem="operationItem"/>
  </div>
  <el-dialog v-model="remarkDialogVisible" :title="title" :before-close="handleClose">
    <div>
      <el-form ref="remarkRef" :model="form.data" :rules="rules">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.data.remark" type="textarea" placeholder="请填写备注" :autosize="{ minRows: 3, maxRows: 5 }"
                    :maxlength="100" :show-word-limit="true"></el-input>
        </el-form-item>
      </el-form>

    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="remarkDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import tablePaging from '@/views/common/component/table-paging'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { download } from "@/utils/request";
import {
  tableItem,
  operationItem, addOrEditWithdrawalRemarkApi
} from './const.js'
import { ElMessage } from 'element-plus'
import {saleListApi} from '../management/const'
const router = useRouter()
const { proxy } = getCurrentInstance();
const title = ref('');
const isAdd = ref(false);
const remarkDialogVisible = ref(false);
const form = reactive({data:{}})
const rules = ({
  remark: [{ required: true, message: '请填写备注', trigger: 'blur' }],
})
const handleClose = () => {
  reset();
  remarkDialogVisible.value = false;
};
// 搜索
operationItem.menuArray[0].handle = () => {
  clickSearch()
}
// 导出
operationItem.menuArray[1].handle = () => {
  clickExport()
}
//添加备注
tableItem.btnArray[0].handle = (row) => {
  addOrEditRemark('add', row)
}
//修改备注
tableItem.btnArray[1].handle = (row) => {
  addOrEditRemark('edit', row)
}
function addOrEditRemark(type, row) {
  remarkDialogVisible.value = true
  if(type === 'add') {
    isAdd.value = true
    title.value = '添加备注'
    form.data.id = row.id
    form.data.remark = ''
  } else if(type === 'edit') {
    isAdd.value = false
    title.value = '修改备注'
    form.data.id = row.id
    form.data.remark = row.remark
  }
}

function clickSearch() {
  tableItem.pageInfo.paging()
}
function clickExport() {
  let url = '/sale/withdrawal/export'
  let fileName = '提现明细表'
  download(url, tableItem.pageInfo.request, fileName, {}, {})
}
//设置销售搜索栏可选性
function setSaleRootOptionsList() {
  let dataRequest = {
    typeCode: 'root',
    disabledFlag: '0'
  }
  saleListApi(dataRequest).then(res => {
    const saleList = res.rows || res.data
    saleList.map(item => {
      operationItem.SearchItem[4].options.push({ label: item.sale, value: item.num })
    })
  })
}
//提交表单
function submitForm() {
  proxy.$refs["remarkRef"].validate(valid => {
    if (valid) {
      addOrEditWithdrawalRemarkApi(form.data).then(res => {
        ElMessage.success(isAdd.value? '添加成功' : '修改成功');
        remarkDialogVisible.value = false;
        tableItem.pageInfo.paging()
      })
    }
  })
}
//清空表单
function reset() {
  // clearForm(form)
  proxy.resetForm("remarkRef");
}

onMounted(() => {
  setSaleRootOptionsList()
})

</script>
<style></style>
